<template>
	<view>
		<view class="tips_item" v-for="item in tipsData" :key="item.id" @click="chooseTip(item)">
			<view class="tips_name">
				{{item.name}}
			</view>
			<view v-if='item.address.length>0' class="tips_desc">
				<u-icon name='map-fill' size='28' color='#7A7D83'></u-icon>
				<text style="margin-left: 10rpx;">{{item.address}}</text>
			</view>
			<view v-else class="tips_desc">
				<u-icon name='map-fill' size='28' color='#7A7D83'></u-icon>
				<text style="margin-left: 10rpx;">{{item.district}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tipsData: {
				type: Array,
				default: []
			},
			//传入的是起点还是终点
			tipsType: {
				type: String,
				default: ''
			}
		},
		watch: {
			tipsType: {
				handler(val) {
					this.type = val
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				type: ''
			}
		},
		methods: {
			chooseTip(data) {
				this.$emit('clickTipData', {
					data,
					tipType: this.type
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/* tips */
	.tips_item {
		width: 100vw;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 20rpx 40rpx 20rpx 60rpx;
		border-bottom: #F6F6F6 solid 2rpx;

		.tips_name {
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.tips_desc {
			font-size: 24rpx;
		}
	}
</style>
